<template>
  <div>
    <nav class="navbox" v-show="islok">
      <li v-for="(value, index) in list" :key="value.id" @click="che(index)">
        <img v-if="index ==cur" :src="value.img" alt />
        <img v-else :src="value.imgs" alt />
        <router-link :to="value.path">{{ value.name }}</router-link>
      </li>
    </nav>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          name: "首页",
          path: "/home",
          img: require("../assets/img/tabbar12.png"),
          imgs: require("../assets/img/tabbar11.png")
        },
        {
          id: 2,
          name: "拼团",
          path: "/partaker",
          img: require("../assets/img/tabbar21.png"),
          imgs: require("../assets/img/tabbar20.png")
        },
        {
          id: 3,
          name: "分类",
          path: "/classify",
          img: require("../assets/img/tabbar31.png"),
          imgs: require("../assets/img/tabbar30.png")
        },
        {
          id: 4,
          name: "购物车",
          path: "/shoppingcart",
          img: require("../assets/img/gouwuche.png"),
          imgs: require("../assets/img/gouwuche-m.png")
        },
        {
          id: 5,
          name: "我的",
          path: "/me",
          img: require("../assets/img/shouye.png"),
          imgs: require("../assets/img/shouye-m.png")
        }
      ],
      cur: 0,
      islok: true
    };
  },

  components: {},

  methods: {
    che(index) {
      this.cur = index;
    }
  },
  // 进入页面判断
  created() {
    // 判断是否需要隐藏菜单栏
    let _this = this;
    setTimeout(function() {
      if (_this.$route.path == "/login") {
        _this.islok = false;
      } else if (_this.$route.path == "/reg") {
        _this.islok = false;
      }
    }, 100);
  },
  watch: {
    $route: {
      deep: true,
      handler(res) {
        console.log(res, 222);
        if (res.path == "/") {
          this.cur = 0;
        } else if (this.$route.path == "/partaker") {
          this.cur = 1;
        } else if (this.$route.path == "/classify") {
          this.cur = 2;
        } else if (this.$route.path == "/shoppingcart") {
          this.cur = 3;
        } else if (this.$route.path == "/me") {
          this.cur = 4;
        }
      }
    }
  }
};
</script>

<style scoped lang="scss">
body {
  width: 100%;
  height: 100vh;
}
.navbox {
  display: flex;
  height: 120px;
  width: 100%;
  position: fixed;
  bottom: 0;
  justify-content: space-around;
  align-items: center;
  li {
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      height: 50px;
      width: 50px;
      margin-bottom: 5px;
    }
    a {
      font-size: 16px;
    }
  }
}
</style>
